import React, { Component } from 'react'

//pageA需要管理员权限才可以访问
class PageA extends Component{
  render(){
    return <h1>PageA</h1>
  }
}

function withAdminAuth(WrappedComponent){
  return class extends Component {
    state = {
      role: ''
    }
    componentDidMount() {
      setTimeout(()=>{
        this.setState({
          role: 'VIP'
        })
      }, 3000)
    }
    render() {
      if(this.state.role === 'admin'){
        return <WrappedComponent></WrappedComponent>
      }else{
        return <div>无权限查看</div>
      }
    }
  }
}

//pageB需要VIP权限才可以访问
class PageB extends Component{
  render(){
    return <h1>PageB</h1>
  }
}

function withVIPAuth(WrappedComponent){
  return class extends Component {
    state = {
      role: ''
    }
    componentDidMount() {
      setTimeout(()=>{
        this.setState({
          role: 'VIP'
        })
      }, 3000)
    }
    render() {
      if(this.state.role === 'VIP'){
        return <WrappedComponent></WrappedComponent>
      }else{
        return <div>无权限查看</div>
      }
    }
  }
}

let WithAdminPageA = withAdminAuth(PageA)
let WithVIPPageB = withVIPAuth(PageB)

export default class App extends Component {
  render() {
    return (
      <div>
        <WithAdminPageA></WithAdminPageA>
        <WithVIPPageB></WithVIPPageB>
      </div>
    )
  }
}
